<template>
  <div class="warp-header">
    <div class="padding-left"></div>
    <div class="warp-img">
      <img class="log_style" :src="require('../assets/img/Flogo.png')" />
    </div>
    <div class="padding-center"></div>
    <div class="warp-center">
      <ul class="df flex-center">
        <li class="hover-li active-line">
          <router-link to="/home">
            <img class="icon_style" :src="require('../assets/img/icon01.png')" />
            <a class="list-block">
              Home
            </a>
          </router-link>
        </li>
        <li class="hover-li active-line">
          <router-link to="">
            <img class="icon_style" :src="require('../assets/img/icon02.png')" />
            <el-dropdown class="list-block" trigger="hover" placement="bottom-start">
              <span class="el-dropdown-link">
                <a class="list-block">
                  Sequence Management
                </a>
              </span>
              <template #dropdown>
                <el-dropdown-menu style="font-weight: 600;">
                  <el-dropdown-item class="clearfix" @click="toPlot('/designLibrary')">
                    <span style="font-size: 15px;padding: 3px 0px;">Design Library</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click="toPlot('/requestManagement')">
                    <span style="font-size: 15px;padding: 3px 0px;">Sequence Registration</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <!--<el-dropdown-item class="clearfix" @click="toPlot('/volcatargetno')">
                    <span style="font-size: 15px;padding: 3px 0px;">Sequence Approve</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>-->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </router-link>
        </li>
        <li class="hover-li active-line">
          <router-link to="">
            <img class="icon_style" :src="require('../assets/img/icon03.png')" />
            <el-dropdown class="list-block" trigger="hover" placement="bottom-start">
              <span class="el-dropdown-link">
                <a class="list-block">
                  Component Management
                </a>
              </span>
              <template #dropdown>
                <el-dropdown-menu style="font-weight: 600;">
                  <el-dropdown-item class="clearfix" @click="toPlot('/sequenceManagement')">
                    <span style="font-size: 15px;padding: 3px 0px;">Component Management</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click="toPlot('/sequenceImport')">
                    <span style="font-size: 15px;padding: 3px 0px;">Component Import</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <!--<el-dropdown-item class="clearfix">
                    <span style="font-size: 15px;padding: 3px 0px;">Compound Mangement</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click="toPlot('/pooltManagement')">
                    <span style="font-size: 15px;padding: 3px 0px;">Pool Management</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click="toPlot('/geneManagement'),changeHeader2()">
                    <span style="font-size: 15px;padding: 3px 0px;">Gene Management</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>-->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </router-link>
        </li>
        <li class="hover-li active-line">
          <router-link to="">
            <img class="icon_style" :src="require('../assets/img/icon04.png')" />
            <a class="list-block">
              System Management
            </a>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="spacer"></div>
    <div class="right-header">
      <div>
        <!--        <img :src="require('../assets/user.jpg')" />-->
      </div>
      <div style="width: 200px;">
        <span class="p_style">Welcome, Sheng</span>
        <el-dropdown class="list-block" trigger="click">
          <span class="el-dropdown-link">
            <el-button circle color="rgba(145, 151, 244, 0)" style="color: white; position: absolute;top: -17px;">
              <el-icon><arrow-down-bold /></el-icon>
            </el-button>
          </span>
          <template #dropdown>
            <el-dropdown-menu style="width: 170px;font-weight: 600;">
              <el-dropdown-item class="clearfix">
                <span style="font-size: 15px;padding: 3px 0px;">Logout</span>
                <el-badge class="mark" />
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="padding-right"></div>
  </div>
  <!--<div class="header_icon1">
    <img :src="require('../assets/img/01.png')" alt="" />
    <div style="width: 200px;">
      <li style="color: white;font-size: 14px;">Plasmid</li>
      <li style="color: white;font-size: 20px;margin-top: 5px;">4,962</li>
    </div>
  </div>
  <div class="header_icon2">
    <img :src="require('../assets/img/02.png')" alt="" />
    <div style="width: 200px;">
      <li style="color: white;font-size: 14px;">Antibody</li>
      <li style="color: white;font-size: 20px;margin-top: 5px;">1,758</li>
    </div>
  </div>
  <div class="header_icon3">
    <img :src="require('../assets/img/03.png')" alt="" />
    <div style="width: 200px;">
      <li style="color: white;font-size: 14px;">Sequence</li>
      <li style="color: white;font-size: 20px;margin-top: 5px;">10,158</li>
    </div>
  </div>-->
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Loading, ArrowDownBold } from "@element-plus/icons-vue";
import router from "@/router";
export default defineComponent({
  name: "HeaderMockUp",
  components: {
    ArrowDownBold
  },
  setup() {
    const activeIndex = ref("1");
    const headerList = ref([
      {
        name: "Home",
        icoUrl: require("../assets/img/icon01.png"),
        routerLink: "/home"
      },
      {
        name: "Data Analysis",
        icoUrl: require("../assets/img/icon02.png"),
        routerLink: ""
      },
      {
        name: "Data Management",
        icoUrl: require("../assets/img/icon03.png"),
        routerLink: "/experimentManagement"
      },
      {
        name: "System Management",
        icoUrl: require("../assets/img/icon04.png"),
        routerLink: ""
      }
    ]);
    const toPlot = (path: string) => {
      router.push(path);
    };
    return {
      activeIndex,
      headerList,
      toPlot,
    };
  },
});
</script>
<style>
/**
  更改全局scope的样式问题
 */
.el-menu--popup {
  min-width: 96px;
}
</style>
<style lang="scss" scoped>
::v-deep {
  .el-menu--horizontal {
    border-bottom: none;
  }
}
</style>
<style scoped lang="scss">
.warp-header {
  position: sticky;
  top: 0;
  z-index: 201;
  width: 100%;
  display: flex;
  height: 180px;
  align-items: baseline;
  background-image: url("../assets/img/banner.jpg");
  & .padding-left {
    width: 6%;
  }
  & .warp-img {
    display: flex;
    align-items: center;
    width: 100px;
    height: 50px;
  }
  & .padding-center {
      width: 12px;
  }
  & .warp-center {
    /*display: flex;*/
    /*align-items: center;*/
    width: 71%;
    position: relative;
    top: -1px;
    left: 50px;
    & .flex-center li {
      margin-left: 30px;
      & .list-block {
        display: inline-block;
        color: #fff;
        font-weight: 600;
        font-size: 20px;
      }
    }
    & .hover-li {
      &:hover {
        .list-block {
          text-decoration: underline;
          text-underline-offset: 3px;
        }
      }
    }
  }
  & .spacer {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  & .right-header {
    /*display: flex;*/
    /*align-items: center;*/
    position: relative;
    top: -1px;
    text-align: end;
    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      margin-right: 20px;
    }
    & .el-tooltip__trigger {
      color: #ffffff;
      font-weight: 500;
      font-size: 16px;
    }
  }
  & .padding-right {
    width: 105px;
  }
}
.active-line:first-child a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p_style {
  color: white;
  font-size: 18px;
  padding-right: 10px;
  font-weight: 600;
}
.icon_style {
  top: 3px;
  position: relative;
  padding-right: 5px;
}
.log_style {
    position: relative;
    top: 20px;
}
.header_icon1 {
    display: flex;
    position: fixed;
    top: 105px;
    left: 16%;
    z-index: 999;
}
.header_icon2 {
    display: flex;
    position: fixed;
    top: 105px;
    left: 45%;
    z-index: 999;
}
.header_icon3 {
    display: flex;
    position: fixed;
    top: 105px;
    left: 75%;
    z-index: 999;
}
</style>
